<template>
    <div class="nameTitle">
        <div>{{ $store.state.nameTitleContent.name }}</div>
        <div>{{ $store.state.nameTitleContent.value }}</div>
    </div>
</template>

<script>
import { onMounted, ref, provide, nextTick, onBeforeUnmount, watch } from "vue";
import { useStore } from "vuex";
export default {
    setup() {
        const store = useStore();

        watch(
            () => store.state.nameTitleContent,
            (newVlaue) => {
                switch (newVlaue) {
                }
            }
        );

        return {};
    },
};
</script>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .nameTitle {
        position: absolute;
        left: vw1(1400);
        top: vh(120);
        min-width: vw1(200);
        height: vh(95);
        background: url('/data/images/sjzl/title.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        div:nth-child(1) {
            font-size: vw1(30);
            font-weight: 500;
            text-align: center;
            color: #a8dfff;
        }

        div:nth-child(2) {
            font-size: vw1(25);
            font-weight: 500;
            text-align: center;
            color: #42baff;
        }
    }
}
</style>